<template>
    <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
    :css="false">
        <DialogBox :isvidel="isvidels" :timu_list="timu_list" :ranking="0"></DialogBox>
        <!-- <div class="box" v-if="isvidels">123</div> -->
    </Transition>
    <!-- <button @click="isvidels = !isvidels">123</button> -->
</template>

<script setup>
import { ref,reactive} from 'vue';
import DialogBox from '@/components/DialogBox.vue';
import gsap from 'gsap';

const isvidels = ref(true);
console.log(isvidels)
const timu_list = reactive([
    {
        timu:'题目：一加一等于多少',
        daan:'不三不四',
        zhengque:true,
    },
    {
        timu:'题目：什么东西越擦越小',
        daan:'橡皮擦',
        zhengque:true,
    },
    {
        timu:'题目：什么东西不能吃',
        daan:'东西',
        zhengque:true,
    },
    {
        timu:'题目：什么人始终不敢洗澡',
        daan:'泥人',
        zhengque:true,
    },{
        timu:'题目：打什么东西,不必花力气? ',
        daan:'打瞌睡',
        zhengque:true,
    },
])
console.log(timu_list)

function onBeforeEnter(el) {
  gsap.set(el, {
    translateX: 20,
    opacity: 0
  });
}

function onEnter(el, done) {
  const tl = gsap.timeline();
  tl.to(el, {
    duration: 0.3,
    translateX: 0,
    opacity: 1,
    ease: 'power2.out'
  });
  tl.to(el, {
    duration: 0.3,
    scaleX: 1.2,
    scaleY: 1.2,
    ease: 'power2.out'
  });
  tl.eventCallback('onComplete', done);
}

function onLeave(el, done) {
  const tl = gsap.timeline();
  tl.to(el, {
    duration: 0.3,
    scaleX: 1,
    scaleY: 1,
    opacity:1,
    ease: 'power2.out'
  });
  tl.to(el, {
    duration: 0.3,
    translateX: 20,
    opacity:0,
    ease: 'power2.out'
  });
  tl.eventCallback('onComplete', done);
}
</script>

<style lang="scss">
.box {
    width: 300px;
    height: 240px;
    position: fixed;
    top: 40%;
    left: 10%;
    // transform: translateX(-50%);
    background-color: black;
}

</style>